<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签到情况信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <script src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.common.js"></script>
    <style>
        #chart {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>

<div id="chart">
    <div id="container" style="height: 100%"></div>
</div>
<table class="layui-hide" id="course_table" lay-filter="course_table">
    <div id="laypage" class="layui-laypage-btn"></div>

</table>


</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>
    layui.use(['jquery', 'form', 'table', 'laypage', 'layer', 'laydate', 'tree', 'transfer', 'layedit'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var laypage = layui.laypage
        var layer = layui.layer;
        var laydate = layui.laydate;

        let taskId = CoreUtil.getUrlParam("taskId")

        let searchParam = {
            current: 1,
            size: 10,
            /*以下为多条件查询参数*/
            name: null
        }

        /**
         *  加载分页数据
         */
        function loadPageInfo() {
            CoreUtil.sendAjax("/study/user/student/page", searchParam, function (res) {
                //初始化分页器
                laypageTable(res.total, searchParam.current);
                //初始化渲染数据
                loadTable(res.records);
                if (res.records != null) {
                    loadTable(res.records);
                }
            }, "GET", false, function (res) {
                //用户列表接口无权限回调
                layer.msg("抱歉！您暂无获取用户列表的权限");
                var noAuthorityData;
                noAuthorityData = [];
                loadTable(noAuthorityData);
            });
        }

        //渲染分页插件
        var laypageTable = function (count, currentPage) {
            laypage.render({
                elem: 'laypage'
                , count: count
                , limit: searchParam.size
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , curr: location.hash.replace('#!currentPage=', '')     //获取起始页
                , hash: 'currentPage'                                   //自定义hash值
                , jump: function (obj, first) {
                    if (!first) {
                        searchParam.current = obj.curr;
                        searchParam.size = obj.limit;
                        loadPageInfo();
                    }
                }
            });
        };
        //渲染table
        var loadTable = function (data) {
            //展示已知数据
            table.render({
                elem: '#course_table'
                // 这个 data 为数组数据，直接 放到 data 上即可。
                , data: data
                , even: true
                , limit: data.length
                , limits: [10, 20, 30, 40, 50]
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'id', title: 'ID', width: 300, sort: true},
                        {field: 'username', title: '账号', width: 130},
                        {field: 'phoneNumber', title: '手机号', width: 130},
                        {field: 'nickname', title: '昵称', width: 130},
                        {
                            field: 'status', title: '状态', width: 130, templet: (res) => {
                                return res.status ? "已签到" : "未签到";
                            }
                        },
                        {field: 'mail', title: '邮箱', width: 150}
                    ]
                ]
            });
        };
        loadPageInfo();

        let dom = document.getElementById("container");
        let myChart = echarts.init(dom);
        CoreUtil.sendAjax(`/study/user/checkIn/count?taskId=${taskId}`, null, (res) => {
            myChart.setOption({
                series: [
                    {
                        name: '签到人数',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: [          // 数据数组，name 为数据项名称，value 为数据项值
                            {value: res.checkIn, name: '已签到人数'},
                            {value: res.noCheckIn, name: '未签到人数'}
                        ],
                        label : {
                            normal : {
                                formatter: '{b}:{c}: ({d}%)',
                                textStyle : {
                                    fontWeight : 'normal',
                                    fontSize : 15
                                }
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }, "GET")
    })

</script>
</html>